<template>
	<!-- 立即申报 -->
	<view class="app">
		<!-- 表单 -->
		<u-form :model="formData" ref="uForm" :error-type="errorType" :label-style="labelStyle" label-width=160 label-align="left"
			label-position="top">
			<!-- 查看 -->
			<block v-if="action=='view'">

			</block>
			<!-- 编辑 -->
			<block v-else>
				<u-form-item prop="userno" label="统一社会信用代码" required>
					<u-input type="text" v-model="formData.userno" placeholder="统一社会信用代码" maxlength=18 border trim
						:custom-style="styles" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="xukezhenghao" label="许可证号" required>
					<u-input type="text" v-model="formData.xukezhenghao" placeholder=" " disabled border trim
						:background-color="disabledBackgroundColor" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="username" label="企业名称" required>
					<u-input type="text" v-model="formData.username" placeholder=" " disabled border trim
						:background-color="disabledBackgroundColor" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="jingyingdizhi" label="企业地址" required>
					<u-input type="text" v-model="formData.jingyingdizhi" placeholder=" " disabled border trim
						:background-color="disabledBackgroundColor" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="quyu" label="所属区域" required>
					<u-input type="select" v-model="formData.quyu" placeholder="请选择所属区域" border trim
						@click="showQuyu = true" />
					<u-select v-model="showQuyu" mode="mutil-column-auto" :list="quyuList" value-name="BianMa"
						label-name="MingCheng" @confirm="confirmQuyu">
					</u-select>
				</u-form-item>
				<u-form-item prop="faren" label="法人" required>
					<u-input type="text" v-model="formData.faren" placeholder=" " disabled border trim
						:background-color="disabledBackgroundColor" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="farentel" label="联系电话" required>
					<u-input type="text" v-model="formData.farentel" placeholder="联系电话" maxlength=18 border trim
						:custom-style="styles" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="lianxiren" label="单位联系人" required>
					<u-input type="text" v-model="formData.lianxiren" placeholder="单位联系人" maxlength=18 border trim
						:custom-style="styles" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="lianxirentel" label="联系电话" required>
					<u-input type="text" v-model="formData.lianxirentel" placeholder="联系电话" maxlength=18 border trim
						:custom-style="styles" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="jianguanjiguan" label="监管单位" required>
					<u-input type="text" v-model="formData.jianguanjiguan" placeholder=" " disabled border trim
						:background-color="disabledBackgroundColor" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="jianguanjiguantel" label="联系电话" required>
					<u-input type="text" v-model="formData.jianguanjiguantel" placeholder="联系电话" maxlength=18 border
						trim :custom-style="styles" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item prop="danweijieshao" label="企业简介" required>
					<u-input type="textarea" v-model="formData.danweijieshao" placeholder="企业简介" maxlength=18 border
						trim :custom-style="styles" :placeholder-style="placeholderStyle" />
				</u-form-item>

				<view class="gap">附件区</view>

				<u-form-item prop="url" label="全省餐饮服务量化分级等级申报表" required>
					<view class="">
						<htz-image-upload v-model="url" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" :limit="5" />
					</view>
					<view class="tips">
						<view class="">请上传加盖公章的《全省餐饮服务量化分级等级申报表》照片</view>
						<view class="">照片小于5M，格式为jpg/jpeg/png/gif</view>
					</view>
				</u-form-item>
				<view class="download-bar" @click="download">
					点此下载《全省餐饮服务量化分级等级申报表》
				</view>

				<u-form-item prop="images2" label="营业执照复印件" required>
					<view class="">
						<htz-image-upload v-model="images2" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images3" label="食品经营许可证复印件" required>
					<view class="">
						<htz-image-upload v-model="images3" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images4" label="接受社会监督承诺书" required>
					<view class="">
						<htz-image-upload v-model="images4" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images5" label="企业门脸" required>
					<view class="">
						<htz-image-upload v-model="images5" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images6" label="前厅环境" required>
					<view class="">
						<htz-image-upload v-model="images6" mediaType="image" :sourceType="['album', 'camera']" :max="2"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images7" label="食品安全信息公示板" required>
					<view class="">
						<htz-image-upload v-model="images7" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images8" label="员工健康证公示板" required>
					<view class="">
						<htz-image-upload v-model="images8" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images9" label="从业人员集体照片" required>
					<view class="">
						<htz-image-upload v-model="images9" mediaType="image" :sourceType="['album', 'camera']" :max="1"
							:action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
				<u-form-item prop="images10" label="功能间环境" required>
					<view class="">
						<htz-image-upload v-model="images10" mediaType="image" :sourceType="['album', 'camera']"
							:max="9" :action="uploadAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>

				<u-form-item prop="videos1" label="企业宣传片">
					<view class="">
						<htz-image-upload v-model="videos1" mediaType="video" :sourceType="['album', 'camera']" :max="1"
							:action="uploadVideoAction" :uploadSuccess="uploadSuccess" :uploadFail="uploadFail"
							:name="uploadName" :formData="uploadFormData" />
					</view>
				</u-form-item>
			</block>
		</u-form>
		<u-button class="bottom" type="success" @click="submit" v-if="action!='view'" :disabled="disabled"
			:loading="loading">
			保存
		</u-button>
	</view>
</template>

<script>
	import config from "@/app.config.js";

	export default {
		data() {
			let formData = {
				images: [],

				id: null,
				userno: '', // 统一社会信用代码 查询依据
				xukezhenghao: '', // 许可证号 查出
				username: '', // 企业名称 查出
				jingyingdizhi: '', // 企业地址 查出
				quyu: '', // 所属区域 文字，辽宁省内的市区联动 A_QuYu表
				faren: '', // 法人 查出
				farentel: '', // 联系电话
				lianxiren: '', // 单位联系人
				lianxirentel: '', // 联系电话
				jianguanjiguan: '', // 监管单位 查出
				jianguanjiguantel: '', // 联系电话
				danweijieshao: '', // 企业简介1份；
				iszhongyangchufang: '', // 是否中央厨房，0-否，1-是
				isjitipeican: '', // 是否集体配餐，0-否，1-是
				url: '', // 《全省餐饮服务量化分级等级申报表》并加盖公章的照片；
				images2: '', // 营业执照复印件 1 张照片；
				images3: '', // 食品经营许可证复印件照片 1 张；
				images4: '', // 接受社会监督承诺书 1 份；
				images5: '', // 企业门脸照片 1 张；
				images6: '', // 前厅环境照片 2 张；
				images7: '', // 食品安全信息公示板照片 1 张；
				images8: '', // 员工健康证公示板照片 1 张；
				images9: '', // 从业人员集体照片 1 张；
				images10: '', // 厨房每个功能间环境照片若干张；
				videos1: '', // 企业宣传片1份；（上传视频）
			}
			return {
				id: '',
				action: 'add', // 操作 add新增，edit修改，view查看
				disabled: false, // 提交中禁用
				loading: false, // 提交中loading

				gapHeight: 20, // 间隔槽高度，单位rpx
				gapBgColor: '#e1e1e1', // 间隔槽背景颜色

				// 图片上传
				uploadAction: this.$api.uploadAction,
				uploadFormData: {
					'flag': 'Photo'
				},
				uploadName: 'file',
				minPicCounts: 1, // 至少上传1张照片
				maxPicCounts: 9, // 最多上传9张照片
				
				uploadVideoAction: this.$api.uploadVideoAction,

				url: [], // 《全省餐饮服务量化分级等级申报表》并加盖公章的照片；
				images2: [], // 营业执照复印件 1 张照片；
				images3: [], // 食品经营许可证复印件照片 1 张；
				images4: [], // 接受社会监督承诺书 1 份；
				images5: [], // 企业门脸照片 1 张；
				images6: [], // 前厅环境照片 2 张；
				images7: [], // 食品安全信息公示板照片 1 张；
				images8: [], // 员工健康证公示板照片 1 张；
				images9: [], // 从业人员集体照片 1 张；
				images10: [], // 厨房每个功能间环境照片若干张；
				videos1: [], // 企业宣传片1份；（上传视频）

				formData,

				quyuList: [], // 所属区域
				showQuyu: false,

				rules: {
					"userno": [{
						"required": true,
						message: '请输入统一社会信用代码',
						trigger: ['change', 'blur'],
					}],
					"xukezhenghao": [{
						"required": true,
						message: '请输入许可证号',
						trigger: ['change', 'blur'],
					}],
					"username": [{
						"required": true,
						message: '请输入企业名称',
						trigger: ['change', 'blur'],
					}],
					"jingyingdizhi": [{
						"required": true,
						message: '请输入企业地址',
						trigger: ['change', 'blur'],
					}],
					"faren": [{
						"required": true,
						message: '请输入法人',
						trigger: ['change', 'blur'],
					}],
					"farentel": [{
						"required": true,
						message: '请输入法人联系电话',
						trigger: ['change', 'blur'],
					}],
					"lianxiren": [{
						"required": true,
						message: '请输入单位联系人',
						trigger: ['change', 'blur'],
					}],
					"lianxirentel": [{
						"required": true,
						message: '请输入单位联系人联系电话',
						trigger: ['change', 'blur'],
					}],
					"jianguanjiguan": [{
						"required": true,
						message: '请输入监管单位',
						trigger: ['change', 'blur'],
					}],
					"jianguanjiguantel": [{
						"required": true,
						message: '请输入监管单位联系电话',
						trigger: ['change', 'blur'],
					}],
					"danweijieshao": [{
						"required": true,
						message: '请输入企业简介',
						trigger: ['change', 'blur'],
					}],
					"url": [{
						"required": true,
						message: '请上传《全省餐饮服务量化分级等级申报表》',
						trigger: ['change', 'blur'],
					}],
					"images10": [{
						"required": true,
						message: '请上传image10',
						trigger: ['change', 'blur'],
					}],
				},
				placeholderStyle: this.$css.placeholderStyle,
				styles: this.$css.styles,
				disabledBackgroundColor: this.$css.disabledBackgroundColor,
				errorType: this.$css.errorType,
				labelStyle: this.$css.labelStyle,
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		onReady() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			testEmit(e) {
				console.log('父组件事件', e)
			},
			getQuyuList() {
				this.quyuList = [{
					BianMa: '2101',
					MingCheng: '沈阳市',
					children: [{
						BianMa: '210102',
						MingCheng: '和平区',
					}, {
						BianMa: '210103',
						MingCheng: '沈河区',
					}, {
						BianMa: '210104',
						MingCheng: '大东区',
					}]
				}, {
					BianMa: '2102',
					MingCheng: '沈阳市2',
					children: [{
						BianMa: '210202',
						MingCheng: '和平区2',
					}, {
						BianMa: '210203',
						MingCheng: '沈河区2',
					}, {
						BianMa: '210204',
						MingCheng: '大东区2',
					}]
				}]
			},
			// 选中所属区域
			confirmQuyu(e) {
				console.log('选中所属区域', e)
				this.formData.quyu = e[0].label + e[1].label;
			},
			initPage(options) {
				this.getQuyuList();
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			validateImage() {
				if (vk.pubfn.isNull(this.url)) {
					vk.alert('请上传《全省餐饮服务量化分级等级申报表》并加盖公章的照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images2)) {
					vk.alert('请上传营业执照复印件照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images3)) {
					vk.alert('请上传食品经营许可证复印件照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images4)) {
					vk.alert('请上传接受社会监督承诺书照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images5)) {
					vk.alert('请上传企业门脸照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images6)) {
					vk.alert('请上传2张前厅环境照片');
					return false;
				}
				if (this.images6.length < 2) {
					vk.alert('请上传2张前厅环境照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images7)) {
					vk.alert('请上传食品安全信息公示板照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images8)) {
					vk.alert('请上传员工健康证公示板照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images9)) {
					vk.alert('请上传从业人员集体照片');
					return false;
				}
				if (vk.pubfn.isNull(this.images10)) {
					vk.alert('请上传厨房每个功能间环境照片');
					return false;
				}
				return true;
			},
			submit() {
				console.log('validate', this.formData, this.images2, this.images3, this.images4, this.images5, this.videos1)
				
				this.$refs.uForm.validate(valid => {
					if (valid && this.validateImage()) this.submitForm();
				})
			},
			submitForm() {
				console.log('submitForm', this.formData)

				this.disabled = true;
				this.loading = true;
				
				let domain = this.$resource.domain;
				this.formData.url = this.url.substr(domain.length-1);
				this.formData.images2 = this.images2.substr(domain.length-1);
				this.formData.images3 = this.images3.substr(domain.length-1);
				this.formData.images4 = this.images4.substr(domain.length-1);
				this.formData.images5 = this.images5.substr(domain.length-1);
				this.formData.images6 = this.images6.substr(domain.length-1);
				this.formData.images7 = this.images7.substr(domain.length-1);
				this.formData.images8 = this.images8.substr(domain.length-1);
				this.formData.images9 = this.images9.substr(domain.length-1);
				this.formData.images10 = this.images10.substr(domain.length-1);
				if(this.videos1 && this.videos1.length > 0) this.formData.videos1 = this.videos1.substr(domain.length-1);
				
				// 提交表单
				let url = this.$api.CompanyApply;
				let data = this.formData;
				if (config.debug) console.log('submitForm传递参数', url, data)
				
				this.$util.request(url, data)
					.then(res => {
						if(config.debug) console.log('企业申报res', res)
						this.pageTo('./qrcode')
					})
					.catch(ex =>{
						console.log('企业申报异常', ex)
						vk.alert(ex, "错误")
						this.disabled = false;
						this.loading = false;
					})

				this.disabled = false;
				this.loading = false;
			},
			// 上传图片成功 注意传的是函数 :uploadSuccess，不是监听 @uploadSuccess
			uploadSuccess(res) {
				if (config.debug) console.log('上传图片成功', res)
				var _res = JSON.parse(res.data);
				// "{"msg":"操作成功",
				// "fileName":"/profile/upload/2023/12/25/959d2546-6fda-441c-81f5-6d8b8392e2b8.jpeg",
				// "code":200,
				// "url":"http://localhost:8080/lhfj/profile/upload/2023/12/25/959d2546-6fda-441c-81f5-6d8b8392e2b8.jpeg"}"
				if (_res.code === 200) { // 这里根据接口返回值修改判断条件
					return {
						success: true,
						url: _res.url
					}
				} else {
					uni.showToast({
						title: '照片上传失败！错误信息如下：' + JSON.stringify(res),
						icon: 'none',
						duration: 2000
					});
					return {
						success: false,
						url: ''
					}
				}
			},
			uploadFail(res) {
				console.log('照片上传失败', res)
				vk.alert(JSON.stringify(res), '照片上传失败');
			},
			chooseSuccess(res) {
				console.log('选择照片', res)
			},
			// 下载文件
			download(filename, url) {
				console.log('下载')
				filename = "全省餐饮服务量化分级等级申报表.doc";
				url = 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/食安调委会送达回证.doc';

				// #ifdef H5
				window.open(url)
				// #endif

				// 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
				// #ifdef MP-WEIXIN
				uni.downloadFile({
					url,
					success: res => {
						if (config.debug) console.log('下载成功', res)
						if (res.statusCode === 200) {
							let tempFilePath = res.tempFilePath; // 临时路径

							// 重命名，以免用户下载的文件是乱码
							let suffix = tempFilePath.substr(tempFilePath.lastIndexOf('.'), tempFilePath
								.length - 1)
							// let filePath = wx.env.USER_DATA_PATH + '/' + filename + suffix;
							let filePath = wx.env.USER_DATA_PATH + '/' + filename;

							// 文件保存到本地
							uni.getFileSystemManager().saveFile({
								tempFilePath, // 源文件临时路径
								filePath, // 新的文件路径
								success: function(res1) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存!',
										duration: 2000,
									});
									// 打开文件
									uni.openDocument({
										showMenu: true, // 显示右上角3个点，可以进行转发、保存等操作
										filePath: res1.savedFilePath,
										success: function(res2) {
											// console.log('打开文档成功');
										}
									});
								}
							});
						}
					}
				})
				// #endif
			}

		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.initPage();
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss" scoped>
	.app {
		margin: 30rpx auto;
		width: 80%;
	}

	.u-input--border {
		border-radius: 10rpx;
	}

	.gap {
		margin: 20rpx 0 10rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: aliceblue;
	}
	.download-bar{
		height: 40rpx;
		background-color: #e1e1e1;
		line-height: 40rpx;
		color: blue;
		font-size: 10px;
	}
</style>